<template>
	<view class="v-home-page" :style="{ '--bg-image': `url(${ materialBg})` }">
		<view :style="{ height: navTop + 'px' }"></view>
		<view id="barTitle" :style="{ opacity: opacityStyle, height: heightSystemss+Number(50) + 'px' }"
			v-show="!hiddenModel">
			<text>热点首页</text>
		</view>

		<view class="flex-start-center " style="color:#333333" @click="navBack()">

			<uni-icons style="margin-top: 7rpx;font-weight: 700;" color="#333333" type="left" size="20"></uni-icons>
			<text style="color: 333333;font-size: 33rpx;font-weight: 700;"> 热点首页</text>
		</view>

		<!-- <view class=" margin-top_30rpx ">
			<sunui-navbar v-if="tabList" :items="tabList" lineHeight="60rpx" :isCenter="false" :currentIndex="tabIndex"
				padding="1rpx" :size="130" activeLineBg="#000000" textAlign="center" activeColor="#000000"
				activeLineWidth="45%" activeDirection="center" activeLineHeight="8rpx" :margin="1"
				@change="getChange"></sunui-navbar>
		</view> -->


		<view class="flex-between">
			<view class="flex-start-center margin_40rpx_0">
				<uni-icons style="" type="calendar-filled" size="24"></uni-icons>
				<view class="font-weight_bold margin-left_10rpx">
					{{ monthtime }}
					<text>月</text>
					{{dayTime}}
					<text>号</text>

				</view>
				<!-- <view class="" style="color: #999999;font-size: 24rpx;margin-left: 5rpx;" v-if="getWeekdays">
					{{getWeekdays}}
				</view> -->
				<view class="" style="margin: 0 10rpx;color: #999999;">
					/
				</view>
				<view class="" style="color: #999999;font-size: 24rpx;">
					每一小时更新
				</view>

			</view>
			<view class="flex" @click="update()">
				<image class="changeICon" :src="group3354Sever" mode=""></image>
				<text style="color: rgba(18, 227, 162, 1);">换一换</text>

			</view>
		</view>

		<view class="" v-for="(item,index) in tabList " :key="index">
			<view class="one flex-between margin-bottom_30rpx" v-if="index==0" @click="viewDetail(item.word)">
				<view class="flex">
					<image class="oneImg" :src="group3350Sever" mode=""></image>
					<text class="font-overflow" style="width: 434rpx;">{{item.word}}</text>
				</view>
				<view class="flex-start-center">
					<image class="hotImg " style="margin-right: 10rpx;" :src="group3353Sever" mode=""></image>
					<text style="color:#AFAFAF ;font-size: 24rpx;">{{item.hotindex}}</text>
					<uni-icons style="margin-top: 4rpx;;" color="#AFAFAF" type="right" size="16"></uni-icons>

				</view>
			</view>
			<view class="two flex-between margin-bottom_30rpx" v-else-if="index==1" @click="viewDetail(item.word)">
				<view class="flex">
					<image class="oneImg" :src="group3351Sever" mode=""></image>
					<text class="font-overflow" style="width: 434rpx;">{{item.word}}</text>
				</view>
				<view class="flex-start-center">
					<image class="hotImg " style="margin-right: 10rpx;" :src="group3353Sever" mode=""></image>
					<text style="color:#AFAFAF ;font-size: 24rpx;font-size: 24rpx;">{{item.hotindex}}</text>
					<uni-icons style="margin-top: 4rpx;;" color="#AFAFAF" type="right" size="16"></uni-icons>

				</view>
			</view>
			<view class="three flex-between margin-bottom_30rpx" v-else-if="index==2 " @click="viewDetail(item.word)">
				<view class="flex">
					<image class="oneImg" :src="group3352Sever" mode=""></image>
					<text class="font-overflow" style="width: 434rpx;">{{item.word}}</text>
				</view>
				<view class="flex-start-center">
					<image class="hotImg " style="margin-right: 10rpx;" :src="group3353Sever" mode=""></image>
					<text style="color:#AFAFAF ;font-size: 24rpx;">{{item.hotindex}}</text>
					<uni-icons style=";" color="#AFAFAF" type="right" size="16"></uni-icons>

				</view>
			</view>
			<view class="other flex-between margin-bottom_30rpx" v-else-if="index!=1||index!=2||index!=0"
				@click="viewDetail(item.word)">
				<view class="flex">
					<text class=" otherImg" style="color: rgba(175, 175, 175, 1);;">{{index}}</text>
					<text class="font-overflow" style="width: 434rpx;">{{item.word}}</text>
				</view>
				<view class="flex-start-center">
					<image class="hotImg " style="margin-right: 10rpx;" :src="group3353Sever" mode=""></image>
					<text style="color:#AFAFAF ;font-size: 24rpx;">{{item.hotindex}}</text>
					<uni-icons style=";" color="#AFAFAF" type="right" size="16"></uni-icons>

				</view>
			</view>
		</view>


		<!-- 	<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
			@up="upCallback" :up="upOption" :down="downOption">

			<view class="hotspotList margin-top_30rpx" v-for="(item,index) in list" :key="index">
				
				<view class="border-bottom-ECECEC font-overflow3" style="color: #666666;padding-bottom: 42rpx;">
					{{item.context}}
				</view>

				<view class="flex-between padding-top_20rpx">
					<view class="" style="color: #999999;font-size: 26rpx;">
						创建时间：{{item.createTime}}
					</view>

					<view class="flex-start-center " style="color:#999999" @click="viewDetail(item.context)">
						<text style="color: #0086FF;font-size: 28rpx;"> 查看详情</text>
						<uni-icons style="margin-top: 7rpx;" color="#0086FF" type="right" size="20"></uni-icons>

					</view>
				</view>
			</view>
		</mescroll-body> -->
		<uv-tabbar :value="value" @change="changeTabbar" activeColor="#0547fb">
			<uv-tabbar-item text="首页">


				<template v-slot:active-icon>
					<image class="icon" src="/static/one/蒙版-1.png"></image>
				</template>
				<template v-slot:inactive-icon>
					<image class="icon" src="/static/one/蒙版.png"></image>
				</template>
			</uv-tabbar-item>
			<uv-tabbar-item text="热点话题">
				<template v-slot:active-icon>
					<image class="icon" src="/static/three/蒙版-1.png"></image>
				</template>
				<template v-slot:inactive-icon>
					<image class="icon" src="/static/three/蒙版.png"></image>
				</template>
			</uv-tabbar-item>
			<uv-tabbar-item text="任务">
				<template v-slot:active-icon>
					<image class="icon" src="/static/three/蒙版-3.png"></image>
				</template>
				<template v-slot:inactive-icon>
					<image class="icon" src="/static/three/蒙版-2.png"></image>
				</template>
			</uv-tabbar-item>

		</uv-tabbar>



	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			});
			return {
				group3350Sever: this.$imgs.group3350Sever,
				// date: currentDate,
				group3354Sever: this.$imgs.group3354Sever,
				group3351Sever: this.$imgs.group3351Sever,
				group3352Sever: this.$imgs.group3352Sever,
				group3353Sever: this.$imgs.group3353Sever,
				currentTime: 1,


				yeartime: currentDate.split('-')[0],
				//选择的月份
				monthtime: currentDate.split('-')[1],

				dayTime: currentDate.split('-')[2],

				month: '',
				year: '',
				day: '',
				startDate() {
					return this.getDate('start');
				},
				endDate() {
					return this.getDate('end');
				},

				currentTimeFn() {
					return function(currentIndex) {
						if (currentIndex == '1') {
							// 日
							return 'day';

						} else if (currentIndex == '2') {
							// 月
							return 'month';
						} else if (currentIndex == '3') {
							// 年
							return 'year';
						}
					};
				},
				list: [],



				value: 1,
				tabIndex: 0,
				navTop: '',
				materialBg: 'https://tuanma.weijuyunke.com/index/images/material.png',
				tabList: [],
				getWeekdays: '',
				pid: '',
				copyTypeInfo: {
					content: '',
					name: ''
				},
				hiddenModel: true, //显示影藏
				opacityStyle: 0, //透明度
				heightSystemss: "",
				tallySet: uni.getStorageSync('tallySet'),
				user: uni.getStorageSync('user'),
				memberSetObj:{}

			}
		},
		onLoad(options) {
			const app = getApp();
			this.navTop = app.globalData.navTop;




			this.hotspotNewsFn()
			this.createdgetSystemInfo()
			this.userInfos()
			this.memberSetFn()


		},
		onPageScroll(ev) {


			if (ev.scrollTop > 10) {
				let opacity = ev.scrollTop / 140

				// this.opacityStyle = opacity > 1 ? 1 : opacity
				this.opacityStyle = 1
				this.hiddenModel = false
				// this.createdgetSystemInfo();

			} else {
				this.hiddenModel = true
			}
		},

		onShow() {




		},
		computed: {


		},
		methods: {
			async userInfos() {
				const result = await this.$http.get({
					url: this.$api.userInfo,
					data: {
						// 用户id
						uid: uni.getStorageSync('uid'),
						// 上级id
						// pid: ''
					}
				});
				if (result.errno == 0) {
					this.user = result.data;
			
					uni.setStorageSync('user', result.data);
			
			
				}
			},
			createdgetSystemInfo() {
				let menuButtonObject = uni.getMenuButtonBoundingClientRect(); //获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
				uni.getSystemInfo({
					//获取系统信息
					success: res => {
						let navHeight = menuButtonObject.height + (menuButtonObject.top - res
							.statusBarHeight) * 2; //导航栏高度=菜单按钮高度+（菜单按钮与顶部距离-状态栏高度）*2
						this.heightSystemss = navHeight;
						console.log(navHeight, '==========================')

					},
					fail(err) {
						console.log(err);
					}
				});
			},
			async update() {

				const result = await this.$http.post({
					url: this.$api.hotspotRefresh,
					data: {

					}
				});
				if (result.errno == 0) {
					this.tabList = result.data

				} else {

					this.$sun.toast(result.message)
				}
			},

			// async upCallback(scroll) {



			// 	const result = await this.$http.post({
			// 		url: this.$api.hotspotNews,
			// 		data: {
			// 			pid: this.pid,

			// 			page: scroll.num,
			// 			limit: 10
			// 		}
			// 	});
			// 	if (result.errno == 0) {

			// 		this.mescroll.endByPage(result.data.length,result.data.length);
			// 		if (scroll.num == 1) this.list = [];
			// 		this.list = this.list.concat(result.data);
			// 	}

			// },


			async hotspotNewsFn() {
				const result = await this.$http.post({
					url: this.$api.hotspotNews,
					data: {
						pid: 0,

					}

				});
				if (result.errno == 0) {
					console.log(result.data)

					this.tabList = result.data



					this.$nextTick(() => {
						// this.mescroll.resetUpScroll();
					});




				} else {

					this.$sun.toast(result.message)
				}
			},




			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				this.$nextTick(() => {
					this.getWeekday(year, month, day)
				})
				return `${year}-${month}-${day}`;

			},
			// 获取当前为星期几
			getWeekday(year, month, day) {
				const date = new Date(year, month - 1, day); // 注意：月份从0开始，1月是0，2月是1，依此类推
				const dayOfWeek = date.getDay();
				const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
				this.getWeekdays = days[dayOfWeek];

				// this.$set(days[dayOfWeek], dayOfWeek, this.getWeekdays );
				console.log(this.getWeekdays)
			},

			navBack() {
				this.$sun.navBack()
			},
			async memberSetFn() {
				const result = await this.$http.get({
					url: this.$api.memberSet,
					data: {
			
			
					}
				});
				if (result.errno == 0) {
			
					this.memberSetObj = result.data
			
					console.log(result.data)
			
				}
			},
			viewDetail(context) {
				
				if (this.user.is_member == 0&&this.memberSetObj.is_open==1) {
					uni.showModal({
					title: '温馨提示',
											content: '你当前不是会员，请开通会员后享受该功能',
											confirmText: '开通会员',
											confirmColor: '#4A5EFF',
						success: async (res) => {
							if (res.confirm) {
				
				
								this.$sun.navGo('/pages/contactUs/memberCenter')
				
							} else if (res.cancel) {
				
							}
						}
					});
				} else {
					uni.showModal({
						title: '获取热点文案',
						content: '获取热搜榜文案将会扣除'+this.tallySet.copywriter_tally+'算力',
						success: async (res) => {
							if (res.confirm) {
								console.log(context)
								this.copyTypeInfo = {
									name: '',
									content: [context],
								}
								
								this.$sun.navGo('/pagesA/creatCenter/realHotspots/HotspotsDetail?obj=' + encodeURIComponent(JSON.stringify(
									this.copyTypeInfo)))
					
							} else if (res.cancel) {
					
							}
						}
					});
				}

			


				

			},

			getChange(index) {
				this.tabIndex = index;

				this.pid = this.tabList[this.tabIndex].id




			},
			changeTabbar(e) {
				console.log(e)
				if (e == 2) {
					this.$sun.navGo('/pagesA/creatCenter/realHotspots/hotspotTask')
				} else if (e == 1) {
					// this.$sun.navGo('/pagesA/creatCenter/realHotspots/realHotspots')
				} else {
					this.$sun.navSwitch('/pages/index/index')
				}

			},

		}
	}
</script>

<style lang="less">
	.v-home-page {
		background-image: (var(--bg-image));
		background-repeat: no-repeat;
		background-size: contain;
		position: relative;
		height: 100vh;
		padding: 20rpx;



		#barTitle {
			position: fixed;
			width: 750rpx;
			top: 0;
			left: 0;
			background: #fff;
			color: #000000;
			text-align: center;
			font-weight: bold;
			z-index: 9999
		}

		#barTitle>text {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 20rpx
		}

		.other {
			padding: 0 20rpx;
			/* 矩形 5632 */
			width: 704rpx;
			height: 84rpx;
			border-radius: 20rpx;

			background: rgba(255, 255, 255, 1);
		}

		.one {
			padding: 0 20rpx;
			/* 矩形 5632 */
			width: 704rpx;
			height: 84rpx;
			border-radius: 20rpx;

			background: linear-gradient(90.00deg, rgba(255, 155, 155, 0.51), rgba(255, 255, 255, 0) 100%);
		}

		.oneImg {
			margin-right: 10rpx;
			/* 矢量 210 */
			width: 42rpx;
			height: 45.26rpx;
		}

		.hotImg {
			/* 热门 1 */
			width: 26rpx;
			height: 26rpx;
		}

		.two {
			border-radius: 20rpx;
			padding: 0 20rpx;
			/* 矩形 5633 */
			width: 704rpx;
			height: 84rpx;
			background: linear-gradient(90.00deg, rgba(255, 226, 205, 1), rgba(255, 247, 241, 0.46) 100%);
		}

		.three {
			padding: 0 20rpx;
			border-radius: 20rpx;
			width: 704rpx;
			height: 84rpx;
			background: linear-gradient(90.00deg, rgba(255, 250, 240, 1), rgba(255, 221, 1, 0.07) 100%);
		}

		.otherImg {
			margin-right: 15rpx;
		}

		.changeICon {
			/* 换一换 1 */
			width: 32rpx;
			height: 32rpx;
		}

		.icon {
			width: 56rpx;
			height: 56rpx;
		}

		.hotspotList {
			width: 710rpx;

			border-radius: 30rpx;
			padding: 20rpx;
			background: rgb(255, 255, 255);
		}



		.search-content {

			background: #FFFFFF;

			margin-bottom: 30rpx;
			margin-top: 30rpx;
			width: 700rpx;
			height: 96rpx;
			border-radius: 230rpx;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;
			}

			view {
				color: #fff;
			}

		}
	}
</style>